<template>
  <div>
    <h2>盘点单详情</h2>
    <el-descriptions title="基本信息">
      <el-descriptions-item label="盘点单号">{{ stockCheck.check_no }}</el-descriptions-item>
      <el-descriptions-item label="总金额">{{ stockCheck.total_amount }}</el-descriptions-item>
      <el-descriptions-item label="状态">{{ statusMap[stockCheck.status] }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ stockCheck.remark }}</el-descriptions-item>
      <el-descriptions-item label="创建人">{{ stockCheck.create_user.name }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ stockCheck.create_time }}</el-descriptions-item>
    </el-descriptions>

    <el-table :data="stockCheck.details" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="product.name" label="商品名称" />
      <el-table-column prop="product.code" label="商品编码" />
      <el-table-column prop="system_stock" label="系统库存" />
      <el-table-column prop="actual_stock" label="实际库存" />
      <el-table-column prop="difference" label="差异数量" />
      <el-table-column prop="amount" label="差异金额" />
      <el-table-column prop="remark" label="备注" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const route = useRoute()
const stockCheck = ref({})

const statusMap = {
  0: '待审核',
  1: '已审核',
  2: '已取消'
}

const getStockCheckDetail = async () => {
  try {
    const res = await request.get(`/api/stock-check/${route.params.id}/`)
    stockCheck.value = res
  } catch (error) {
    console.error('获取盘点单详情失败:', error)
  }
}

onMounted(() => {
  getStockCheckDetail()
})
</script>
